﻿@page "/pivot-table/value-sorting"

@using Syncfusion.Blazor.PivotView
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_productdetails

<SampleDescription>
  <p>This sample demonstrates ordering of values in ascending or descending order. Here, the<b>FY 2015 -> In Stock</b> column header text is ordered by defining sort-related settings in code behind.</p>   
</SampleDescription>
<ActionDescription>
   <p>You can sort column values by clicking the column header. Clicking the same header once again will reverse the sorting
     direction. It can be enabled by setting the <code>EnableValueSorting</code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html'>SfPivotView</a></code> class to <b>true</b>.</p>
    <p>Value sort-related settings can be defined in code behind, too. To do so, headers of the column to be sorted are given
        in the <code>HeaderText</code> property under <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.PivotView.PivotViewValueSortSettings_members.html'>PivotViewValueSortSettings</a></code> class, separated by a delimiter string. The purpose of providing complete header text here is to indicate exactly which
        value column needs to be sorted. The string which is used to separate the headers is given in the
        <code>HeaderDelimiters</code> property. The sorting direction is performed by the <code>SortOrder</code> property.</p>
   <p>More information on the value sorting feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/sorting/#value-sorting'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotProductDetails" Height="300" Width="100%" EnableValueSorting=true ShowFieldList="true" ShowValuesButton="true" ShowTooltip=false>
            <PivotViewDataSourceSettings DataSource="@Data" ExpandAll=false EnableSorting=true>
                <PivotViewColumns>
                    <PivotViewColumn Name="Year"></PivotViewColumn>
                    <PivotViewColumn Name="Order_Source" Caption="Order Source"></PivotViewColumn>
                </PivotViewColumns>
                <PivotViewRows>
                    <PivotViewRow Name="Country"></PivotViewRow>
                    <PivotViewRow Name="Products"></PivotViewRow>
                </PivotViewRows>
                <PivotViewValues>
                    <PivotViewValue Name="In_Stock" Caption="In Stock"></PivotViewValue>
                    <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                    <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
                </PivotViewValues>
                <PivotViewFilters>
                    <PivotViewFilter Name="Product_Categories" Caption="Product Categories"></PivotViewFilter>
                </PivotViewFilters>
                <PivotViewFormatSettings>
                    <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                </PivotViewFormatSettings>
                <PivotViewValueSortSettings HeaderText="FY 2015##In Stock" HeaderDelimiter="##" SortOrder="Sorting.Descending"></PivotViewValueSortSettings>
            </PivotViewDataSourceSettings>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
        </SfPivotView>
    </div>
</div>

<style>
    .e-pivotview {
        min-height: 200px;
    }

    html, body {
        height: 100%;
    }
</style>

@code{

    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }
}